<template>
	<div class="login">
		<div class="loginBox">
			<div class="main">
				<form action="" name="login" method="post">
					<p>
						<!-- <label for="">用户名</label>
						<input type="text" id="username"> -->
						<mt-field label="用户名" placeholder="请输入用户名"  id="username"></mt-field>
					</p>
					<p>
						<!-- <label for="">密码</label>
						<input type="password" id="password"> -->
						<mt-field label="密码" placeholder="请输入密码" type="password"  id="password"></mt-field>
					</p>
					<p>
						<input type="checkbox" value="remeber" id="remeber">记住密码
					</p>
					<!-- <mt-field label="验证码" v-model="captcha">
  						<img src="../assets/img/qianz.png" height="45px" width="100px">
					</mt-field> -->
					<div class="notes"></div>
					<p>
						<a href="javascript:void(0)">
							<!-- <input type="button" id="subBtn" value="登录" /> -->
							<img src="../assets/img/login_btn.png" alt="登录" id="subBtn" @click="subBtn"/>
						</a>
					</p>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
    import '../assets/js/jquery.js'
    import { Field } from 'mint-ui'
	export default {
	    name: 'login',
	    data () {
		    return {
		    	message:'hello Vue'
		    	// username:'username',
		    	// password:'password'
		    }
		},
		methods : {
			subBtn:function () {
				var ls=window.localStorage;
				//如果本地存储中记录了用户名及密码则显示在页面中
				if(ls.getItem("user") && ls.getItem("pwd")){
					$("#username").val(ls.getItem("user"));
					$("#password").val(ls.getItem("pwd"));
					$("#remeber").prop("checked",true);
				}
				//点击登陆按钮
				//$("#subBtn").on("click",function(){		
					
						var user=$.trim($("#username").val());
						var	pwd=$.trim($("#password").val());			
						//检测用户名或密码是否为空
						if(user!="" && pwd!=""){
							if(user=="12345" && pwd=="12345"){//判断用户名和密码是否正确
								$(".notes").html("");
								if($("#remeber").prop("checked")){
									//记录用户名及密码				
									ls.setItem("user",user);
									ls.setItem("pwd",pwd);		
								}else{
									//清除本地存储
									ls.setItem("user","");
									ls.setItem("pwd","");
								}
								//进入登录页
								console.log(this)
								this.$router.push({path:"/footer_index"});
							}else{
								$(".notes").html("用户名或密码不正确，请重新输入！");
								$(this).prop("checked",false);
							}
						}else{
							$(".notes").html("请输入用户名或密码后再登陆！");
							$(this).prop("checked",false);
						}
					//}	
			}
		}  
	}
</script>

<style lang="less" scoped>
	.PxToRem(@name,@px){
	    @{name} : @px / 75 * 1rem;
	}
	*{
		margin:0;
		padding:0;
		box-sizing:border-box;
	}
	input, textarea, select {
		font-size:12px;
		font-family:Microsoft YaHei;
		color:#013766;
	}
	body,html{
		height:100%;
		overflow:hidden;
	}
	.loginBox{
		width:100%;
		.PxToRem(height,600);
		//height:600px;
		background: #0F4979;
		margin:0 auto;
		position:relative;
		overflow:hidden;
		.main{
			.PxToRem(width,424);
			.PxToRem(height,256);
			// width:424px;
			// height:256px;
			margin:0 auto;
			.PxToRem(margin-top,193);
			//margin-top:193px;
			//padding:40px 50px;	
			p{
				height:50px;
				label{
					display:inline-block;
					.PxToRem(width,60);
					//width:60px;
				}
				input[type=text],input[type=password]{
					//border:none;
					.PxToRem(height,28);
					.PxToRem(line-height,28);
					.PxToRem(font-size,14);
					padding:0 20px;
					color:#FFF;
					outline:none;
				}
				&:nth-child(3){
					.PxToRem(padding-left,60);
					.PxToRem(height,30);
				}
				&:last-child{
					text-align:center;
				}
			}	
			.notes{
				font-size:12px;
				color:red;
				margin-bottom:15px;
				height:20px;
			}
		}
	}
</style>